<template>
    <div>
        <div class="header-title">
            <span @click="backHandle" class="mint-toast-icon mintui mintui-back"></span>
            <span>交易页</span>
            <span></span>
        </div>
        <div class="header-user">
            <span>
                <img src="../../assets/img/bg2.png" alt />
            </span>
            <span>HPH-海南地产</span>
        </div>
        <div class="price">
            <p>
                <span>价格</span>USDT
            </p>
            <div>
                <span>12260.00</span>
                <span>BTC</span>
            </div>
            <P>≈85758.70 CNY</P>
            <div>
                <input v-model="priceNum" type="text" placeholder="数量" />
                <span>BTC</span>
            </div>
            <p>可用0.0000000 USDT</p>
            <p>充值/购买法币</p>
            <div>
                <span>交易额</span>
                <span>--</span>
            </div>
        </div>
        <div @click="buyNum" class="sto-btn">买入</div>
        <!-- 输入密码框 -->
        <transition name="fade" mode="out-in">
            <div class="password" v-if="passwordShow">
            <div class="password-content">
                <div class="password-title">
                    <span @click="passwordShow =! passwordShow,password = []">×</span>
                    <span>请输入支付密码</span>
                    <span></span>
                </div>
                <div class="password-write">
                    <div class="password-write-input" v-for="i in items" :key="i">
                        <span class="password-write-pint" v-if="password[i]"></span>
                    </div>
                </div>
                <p class="forget-password">忘记密码？ 找回并完成支付</p>
                <div class="password-keyboard">
                    <ul>
                        <li @click="keyUpHandle($event)" v-for="val in keys" :key="val">{{ val }}</li>
                        <li class="del" @click="delHandle">
                            <span class="icon-del">×</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </transition>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
export default {
    data() {
        return {
            //是否填写数量
            priceNum: "",
            //密码框
            items: [0, 1, 2, 3, 4, 5],
            keys: keys(),
            password: [],
            passwordShow:false,
        };
    },
    methods: {
        buyNum() {
            if (!this.priceNum) {
                Toast({
                    message: "充币/购买法币",
                    position: "bottom",
                    duration: 3000
                });
                return false;
            }
            this.passwordShow = true
            // this.$router.push({
            //     name:'StoFinish'
            // })
        },
        backHandle() {
             // 返回时清除password
            this.password = []
            this.$router.go(-1)
        },
        keyUpHandle(e) {
            let text = e.currentTarget.innerText;
            let len = this.password.length;
            if (!text || len >= 6) return;
            this.password.push(text);
            this.ajaxData();
            console.log(this.password);
        },
        delHandle() {
            if (this.password.length <= 0) return false;
            this.password.shift();
            console.log(this.password);
        },
        //所得六位数密码
        ajaxData() {
            if (this.password.length >= 6) {
                console.log(
                    parseInt(this.password.join(" ").replace(/\s/g, ""))
                );
                this.$router.push({name:'stoFinish'})
                this.passwordShow = false;
                this.password = []
            }
            
            return false;
        },
    }
};
</script>
<style lang="less" scoped>
.header-user {
    .flexCenterCenter();
    margin: 20px 40px;
    span {
        font-size: 16px;
        font-weight: bold;
    }
    span:nth-child(1) {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        .flexCenterContent();
        margin-right: 10px;
    }
}
.price {
    margin-top: 30px;
    padding: 15px;
    p:nth-child(1) {
        font-size: 12px;
        color: @blackColor8;
        font-weight: bold;
        span {
            font-size: 14px;
            font-weight: bold;
            color: @blackColor5;
            margin-right: 10px;
        }
    }
    div:nth-child(2) {
        .flexBetweenCenter();
        height: 45px;
        background-color: #eff3f8;
        font-size: 14px;
        font-weight: @blueColor10;
        font-weight: bold;
        padding: 0 15px;
        border-radius: 4px;
        margin: 15px 0;
        span:nth-child(2) {
            color: #627691;
        }
    }
    p:nth-child(3) {
        font-size: 12px;
        color: #627691;
        font-weight: bold;
    }
    div:nth-child(4) {
        .flexBetweenCenter();
        height: 45px;
        background-color: #eff3f8;
        font-size: 14px;
        font-weight: @blueColor10;
        font-weight: bold;
        padding: 0 15px;
        border-radius: 4px;
        margin: 15px 0;
        input {
            background-color: #eff3f8;
            border: none;
            outline: none;
            font-size: 14px;
            color: #627691;
        }
        span:nth-child(2) {
            color: #627691;
        }
    }
    p:nth-child(5) {
        font-size: 14px;
        color: #ccc;
    }
    p:nth-child(6) {
        font-size: 12px;
        color: @blueColor5;
        font-weight: bold;
        margin: 4px 0;
    }
    div:nth-child(7) {
        .flexBetweenCenter();
        font-size: 12px;
        font-weight: bold;
        color: #627691;
        margin: 8px 0 10px;
    }
}
.sto-btn {
    width: 90%;
    margin: 0 auto;
    height: 45px;
    border-radius: 4px;
    background-color: @blueColor10;
    text-align: center;
    line-height: 45px;
    color: @white;
    font-size: 16px;
}
// 输入密码框
.password {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    .password-content {
        height: 60vh;
        width: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        .password-title {
            height: 8vh;
            padding: 0 15px;
            .flexBetweenCenter();
            font-size: 14px;
            font-weight: bold;
            span:nth-child(1) {
                font-size: 24px;
            }
        }
        .password-write {
            .flexStartCenter();
            height: 11vh;
            padding:0 15px;
            div:nth-child(1){
                border-left: 1px solid #b9b9b9;
            }
            .password-write-input {
                border: 1px solid #b9b9b9;
                border-left: none;
                width: 16.666%;
                height: 7vh;
                .flexCenterCenter();
                span{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: @blackColor10;
                }
            }
        }
        .forget-password{
            text-align: center;
            line-height: 11vh;
            font-size: 14px;
            color: @blueColor5;
            height: 11vh;
        }
        .password-keyboard {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 30vh;
            ul {
                .flexStartCenter();
                flex-wrap: wrap;
                li {
                    width: 33.33%;
                    text-align: center;
                    height: 7.5vh;
                    line-height: 7.5vh;
                    font-size: 20px;
                    border: 1px solid #b9b9b9;
                    box-sizing: border-box;
                    border-bottom: none;
                    font-weight: bold;
                    cursor: pointer;
                    &:active {
                        background-color: #d1d4dd;
                    }
                }
                li:nth-child(3n){
                    border-left: 0;
                }
                li:nth-child(2),
                li:nth-child(5),
                li:nth-child(8),
                li:nth-child(11){
                    border-left: 0;
                }
                .del {
                    background-color: #d1d4dd;
                    color: #fff;
                }
            }
        }
    }
}
</style>
